extends layout
block content
    canvas#myCanvas(width="1000" height="1000" style="border:1px solid #000000;")
    img#scream(src="/home/coder352/github/jImage/QQ/qqshow/qqshow_boy_01.jpg")
    //- 默认情况下 <canvas> 元素没有边框和内容
    script.
        var c = document.getElementById("myCanvas");  // 首先, 找到 <canvas> 元素
        var ctx = c.getContext("2d");  // 创建 context 对象, getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        ctx.fillStyle = "#FF0000";  // 画笔颜色 fillStyle 属性可以是 CSS 颜色, 渐变, 或图案, 默认是 #000000
        ctx.fillRect(0, 0, 150, 75);  // 画矩形, fillRect(x, y, width, height), 坐上角 (0, 0)
        ctx.moveTo(0, 0);  // moveTo(x, y) 定义线条开始坐标
        ctx.lineTo(200, 100);  // lineTo(x, y) 定义线条结束坐标
        ctx.stroke();  // 然后使用 stroke() 方法来绘制线条, 绘制线条我们必须使用到 "ink" 的方法, 就像 stroke()
        ctx.beginPath();  // 不加这句话会从上面的线接着画
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);  // arc(x, y, r, start, stop)
        ctx.stroke();  // 不加这句话不会显示圆
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 2;
        ctx.shadowColor = '#666666';
        ctx.font = '24px Arial';
        ctx.fillStyle = '#333333';
        ctx.fillText('带阴影的文字', 20, 40);
        ctx.font = "30px Arial";  // font - 定义字体
        ctx.fillText("Hello World", 300, 50);  // fillText(text, x, y) - 在 canvas 上绘制实心的文本
        ctx.strokeText("Hello World", 10, 50);  // strokeText(text, x, y) - 在 canvas 上绘制空心的文本
        // 利用Path绘制复杂路径 一个笑脸
        var path = new Path2D();
        path.arc(75, 75, 50, 0, Math.PI * 2, true);
        path.moveTo(110,75);
        path.arc(75, 75, 35, 0, Math.PI, false);
        path.moveTo(65, 65);
        path.arc(60, 65, 5, 0, Math.PI * 2, true);
        path.moveTo(95, 65);
        path.arc(90, 65, 5, 0, Math.PI * 2, true);
        ctx.strokeStyle = '#0000ff';
        ctx.stroke(path);
        // 创建线条渐变
        var grd = ctx.createLinearGradient(0, 0, 200, 0);  // createLinearGradient(x, y, x1, y1) - 创建线条渐变
        grd.addColorStop(0, "red");  // 使用渐变对象, 必须使用两种及以上的停止颜色, addColorStop() 指定颜色停止, 参数使用坐标来描述, 可以是 0 至 1
        grd.addColorStop(1, "white");
        // 填充渐变
        ctx.fillStyle = grd;  // 使用渐变, 设置 fillStyle 或 strokeStyle 的值为渐变, 然后绘制形状, 如矩形, 文本, 或一条线
        ctx.fillRect(10, 100, 150, 80);
        // 创建径向渐变
        var grd = ctx.createRadialGradient(100, 100, 5, 200, 200, 100);  // createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变
        grd.addColorStop(0, "red");
        grd.addColorStop(1, "white");
        // 填充渐变
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, 1500, 1500);
        var img = document.getElementById("scream");
        ctx.drawImage(img, 200, 200); // 没画出来, 好尴尬...
